<template>
    <div class="big-box">
        <div class="box-right">
            <!-- 整张试卷题目等 -->
            <div class="exam-main-title">
                <span style="font-family: '华文新魏'; font-size: 36px">{{ ExamInfo.title }}</span>
                <span style="font-family: '华文楷体'; margin: 10px 0px 10px 0px;font-size: 20px;">
                    题目数量:{{ topicNumber }}&nbsp;&nbsp;满分:{{ ExamInfo.fullMark }}
                </span>
            </div>

            <!-- 试题 -->
            <div @click="getChenge" v-for="(topicItem, index) in ExamInfo.topics" :key="index" class="exam-details">
                <!-- 试题 -->
                <div class="shi-ti-style">
                    <!-- 题目 -->
                    <span>{{ index + 1 }}、{{ topicItem.title }}【分值:{{ topicItem.score }}】</span>
                    <!-- 选项 -->
                    <div class="xuan-xiang-style">
                        <!-- 单选 -->
                        <!-- 找到对应的答题卡答题位置 但是可能有问题 可以用 @input="onLog(topicItem, index)"解决 无法根据题目id找到答题位置 v-model="ExamInfo.reply[index].reply" -->
                        <div v-if="topicItem.type == '单选'">
                            <el-radio-group v-model="ExamInfo.reply[index].reply"
                                style="display: flex;flex-direction: column;align-items: flex-start">
                                <el-radio disabled v-for="optionItem in topicItem.options" :value="optionItem.option"
                                    :key="optionItem.option">
                                    {{ optionItem.option }} {{ optionItem.text }}
                                </el-radio>
                            </el-radio-group>
                            <span class="ckda">参考答案: {{ topicItem.answer }}</span>
                            <span class="df">得分: {{ ExamInfo.grade[index].grade }}</span>
                        </div>

                        <!-- 多选 -->
                        <div v-else-if="topicItem.type == '多选'">
                            <el-checkbox-group v-model="ExamInfo.reply[index].reply"
                                style="display: flex;flex-direction: column;align-items: flex-start">
                                <el-checkbox disabled v-for="optionItem in topicItem.options" :value="optionItem.option"
                                    :key="optionItem.option">
                                    {{ optionItem.option }} {{ optionItem.text }}
                                </el-checkbox>
                            </el-checkbox-group>
                            <span class="ckda">参考答案: {{ topicItem.answer }}</span>
                            <span class="df">得分: {{ ExamInfo.grade[index].grade }}</span>
                        </div>

                        <!-- 判断题-->
                        <div v-else-if="topicItem.type == '判断'">
                            <el-radio-group v-model="ExamInfo.reply[index].reply">
                                <el-radio disabled v-for="optionItem in topicItem.options" :value="optionItem.option"
                                    :key="optionItem.option">
                                    {{ optionItem.option }}
                                </el-radio>
                            </el-radio-group>
                            <span class="ckda">参考答案: {{ topicItem.answer }}</span>
                            <span class="df">得分: {{ ExamInfo.grade[index].grade }}</span>
                        </div>

                        <!-- 简答 -->
                        <div v-else-if="topicItem.type == '简答'">
                            <p style="">答：{{ ExamInfo.reply[index].reply }}</p>
                            <span class="ckda">参考答案: {{ topicItem.answer }}</span>
                            <div style="display: flex;align-items: center;margin-top: 10px;">
                                <span style="margin-right: 5px;">打分:</span><n-input-number style="width: 200px;"
                                    v-model:value="ExamInfo.grade[index].grade" placeholder="最小值" :min="0"
                                    :max="topicItem.score" />
                            </div>
                        </div>

                        <!-- 编程题 -->
                        <div v-else-if="topicItem.type == '编程'" style="overflow: auto;margin-top: 20px;">
                            <div style="margin-left: 20px;">
                                答:
                                <n-code :code="ExamInfo.reply[index].reply" :hljs="hljs" language="python"
                                    show-line-numbers />
                            </div>
                            <span class="ckda">参考答案:
                                <n-code :code="topicItem.answer" :hljs="hljs" language="python" show-line-numbers />
                            </span>
                            <div style="display: flex;align-items: center;margin-top: 10px;">
                                <span style="margin-right: 5px;">打分:</span><n-input-number style="width: 200px;"
                                    v-model:value="ExamInfo.grade[index].grade" placeholder="最小值" :min="0"
                                    :max="topicItem.score" />
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="updata">
                <p style="text-align: center;font-size: 24px;font-family: '华文中宋';">注意事项</p>
                <p style="letter-spacing: 2px;color: rgb(252, 156, 156);">1. 完成批改试卷提交后，成绩将无法进行修改, 提交前请仔细斟酌打分。</p>
                <p style="letter-spacing: 2px;color: rgb(252, 156, 156);">2.选择题以及判断题已由系统自动打分。</p>
                <n-button @click="upResult()">提交打分</n-button>
            </div>
        </div>
    </div>
</template>

<script setup>

import teacherHttp from '@/api/teacherHttp';

import { computed, onMounted, ref } from 'vue';
import hljs from "highlight.js"; //代码高亮
import "highlight.js/styles/atom-one-dark.css"; // 选择你喜欢的样式
hljs.highlightAll();
import { useRouter } from 'vue-router';
import { openInfo } from '@/utils/openInfo';
const router = useRouter()
const props = defineProps(['answerSheetId'])
const answerSheetId = props.answerSheetId
//页面基本数据
const ExamInfo = ref({})
//题目数量
const topicNumber = computed(() => {
    //如果拿到了数据就渲染题目数量上去
    if (ExamInfo.value.reply != undefined) {
        return ExamInfo.value.reply.length
    }
    return '获取题目数量失败'
})

onMounted(() => {
    //初始化数据
    getAnswerSheet()
})


//获取本次考试的数据信息信息
function getAnswerSheet() {
    teacherHttp.getAnswerSheet(answerSheetId).then((res) => {
        ExamInfo.value = res.data
        console.log(res);

    })
}

//提交改卷结果
function upResult() {
    const from = {
        grades:ExamInfo.value.grade,
        answerSheetId:ExamInfo.value.answerSheetId
    }
    console.log(from);
    teacherHttp.upResult(from).then((res) => {
        if (res.code==200) {
            openInfo("提交成功",'success')
            console.log(res);
            router.push({name:'CorrectTestPaper'})
        }
    })
}


</script>

<style scoped>
/* 最大的盒子 */
.big-box {
    display: flex;
    justify-content: center;
}

.updata {
    margin-top: 20px;
    margin-bottom: 80px;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    background-color: rgba(230, 230, 230, 0.1);
}

.box-right {
    width: 80%;
    min-width: 600px;
    padding: 20px;
    margin: 15px;
    border-radius: 20px;
    border: 1px rgb(234, 219, 219, 0.1) solid;
    box-shadow: 0px 7px 30px 0px rgba(100, 100, 111, 0.2);
}

/**试题------------------------ */
.exam-main-title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* 每一题 */
.exam-details {
    margin-top: 10px;
    padding: 15px 15px 40px 15px;
    border-radius: 5px;
    min-height: 100px;
    border: 2px dashed rgba(195, 184, 186, 0.1);
    background: #fff;
}

/* 选项样式 */
.xuan-xiang-style {
    margin-top: 10px;
}

/* 修改单选选项框选中颜色 */
.xuan-xiang-style>>>.el-radio__input.is-checked .el-radio__inner {
    background-color: rgb(146, 233, 243);
    border: 1px rgb(154, 237, 248) solid;

}

/* 修改单选选中字体颜色 */
.xuan-xiang-style>>>.el-radio__input.is-checked+.el-radio__label {
    color: rgb(181, 213, 198);
}

/* 修改多项框选中的颜色 */
.xuan-xiang-style>>>.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: rgb(146, 233, 243);
    border: 1px rgb(154, 237, 248) solid;
}

/* 修改多选框选中字体样式 */
.xuan-xiang-style>>>.el-checkbox__input.is-checked+.el-checkbox__label {
    color: rgb(181, 213, 198);
}

.ckda {
    display: grid;
    background-color: rgb(212, 208, 208, 0.2);
    padding: 5px;
    border-radius: 8px;
    margin-top: 5px;
}

.df {
    display: grid;
    padding: 8px;
    margin-top: 8px;
    border-left: 5px solid rgb(141, 28, 186);
}
</style>